<template>
	<view class="warp">
		<tn-nav-bar fixed :isBack="true"  backgroundColor="#342c68" fontColor="#fff">
			任务中心
		</tn-nav-bar>

	<view :style="{paddingTop: vuex_custom_bar_height+10 + 'px'}"></view>

		<!-- 连续签到 -->
		<view class="signIn-box b-card"  >
			<view class="signIn-heard">
				<view class="title">
					<view class="title-today b-fontw">
						已累计签到<text style="color: #24D4D1;margin: 0 4rpx;">{{body.tian}}</text>天
					</view>
					<view class="title-tomorrow">
						累计7天可获得+{{body.sore_qian_qitian}}{{configInfo.site_moneyname}}
					</view>
				</view>
				<view class=" " @click="toReceive">					
				<view
				:class="name==='点击签到' ? 'noActive' : 'activeName'"
					>
					{{name}}
				</view>
				</view>
			</view>
			<view class="signIn-content b-flex-space">
				<view class="item">
					<view class="b-flex-space">
						<view class="item item-flex card" :class="body.tian>0?'tn-cool-bg-color-6' : ''" >
							<text class="title">第1天</text>
							<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
							<text class="describe">+{{body.sore_qian}}</text>
						</view>
						<view class="item item-flex card" :class="body.tian>1?'tn-cool-bg-color-6' : ''" >
							<text class="title">第2天</text>
							<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
							<text class="describe">+{{body.sore_qian}}</text>
						</view>
					</view>
					<view class="b-flex-space">
						<view class="item item-flex card" :class="body.tian>4?'tn-cool-bg-color-6' : ''" >
							<text class="title">第5天</text>
						<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
							<text class="describe">+{{body.sore_qian}}</text>
						</view>
						<view class="item item-flex card" :class="body.tian>5?'tn-cool-bg-color-6' : ''" >
							<text class="title">第6天</text>
						<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
							<text class="describe">+{{body.sore_qian}}</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="b-flex-space">
						<view class="item item-flex card" :class="body.tian>2?'tn-cool-bg-color-6' : ''" >
							<text class="title">第3天</text>
														<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
							<text class="describe">+{{body.sore_qian}}</text>
						</view>
						<view class="item item-flex card" :class="body.tian>3?'tn-cool-bg-color-6' : ''" >
							<text class="title">第4天</text>
							<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
							<text class="describe">+{{body.sore_qian}}</text>
						</view>
					</view>
					<view class="b-flex-space">
						<view class="card" :class="body.tian>6?'tn-cool-bg-color-6' : ''"  style="width: 100%;display: flex;justify-content: space-between;">
							<view class="" style="display: flex;flex-direction: column;">
								<text class="title">第7天</text>
										<image class="img" :src="configInfo.site_moneylogo" style="height:25px;margin: 10px;" mode="heightFix" ></image>
								<text class="describe">+{{body.sore_qian_qitian}}</text>
							</view>
							<image class="img" style="width: 120rpx;height: 110rpx;margin-top: 20rpx;" :src="configInfo.site_moneylogo" mode=""></image>
						</view>
					</view>
				</view>
				
			</view> 

		</view>

		<!-- 任务 -->
		<view class="task-box b-card">
			<view class="title b-fontw">
				做任务赚{{configInfo.site_moneyname}}
			</view>
			<view class="task-item b-flex-space">
				<view class="task-item-left b-flex-space">
					<text class="tn-icon-like-fill" style="font-size: 60rpx;color: #E72F8C;"></text>
					<view class="task-item-describe">
						<view class="title b-fontw">
							签到送心动
						</view>
						<view class="text">
						 双方心动即可在线聊天
						</view>
					</view>
				</view>
				<view class="task-item-btn tn-main-gradient-purplered--single" @click="toReceive">					
					心动+{{body.freexidong}}次
				</view>
			</view>
			<view class="task-item b-flex-space">
				<view class="task-item-left b-flex-space">				
					<image class="task-item-icon" :src="configInfo.site_moneylogo" mode="">
					</image>
					<view class="task-item-describe">
						<view class="title b-fontw">
							签到送{{configInfo.site_moneyname}}
						</view>
						<view class="text">
							{{configInfo.site_moneyname}}用户申请心意的人
						</view>
					</view>
				</view>
				<view class="task-item-btn tn-cool-bg-color-6" @click="toReceive">					
					{{configInfo.site_moneyname}}+{{body.sore_qian}}
				</view>
			</view>

			<view class="task-item b-flex-space">
				<view class="task-item-left b-flex-space">
					<text class="tn-icon-like-fill" style="font-size: 60rpx;color: #E72F8C;"></text>
					<view class="task-item-describe">
						<view class="title b-fontw">
							每日发动态奖励
						</view>
						<view class="text">
							发布帖子并审核通过
						</view>
					</view>
				</view>
				<view class="task-item-btn tn-cool-bg-color-6">
					{{configInfo.site_moneyname}}
					+{{body.add_goods_score}}
				</view>
			</view>

			<view class="task-item b-flex-space">
				<view class="task-item-left b-flex-space">
					<text class="tn-icon-safe" style="font-size: 60rpx;color: #E72F8C;"></text>
					<view class="task-item-describe">
						<view class="title b-fontw">
							实名认证
						</view>
						<view class="text">
							在设置里进行实名认证
						</view>
					</view>
				</view>
				<view class="task-item-btn tn-cool-bg-color-6">
					{{configInfo.site_moneyname}}
					+{{body.sore_realname}}
				</view>
			</view>
		

		
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				name: '点击签到',
				body:{
					"score": 0, "sore_qian": "0", "sore_qian_qitian": "0", "add_conmont_score": "0",
					"add_active_score": "0", "add_category_score": "0", "add_goods_score": "0", "sore_dav": "0",
					"sore_realname": "0", "is_sign": "点击签到", "tian": 0
				},
				receive: false,
				total_start: 0,
				total: 0
				
			}
		},
		onLoad() {
			this.info()

				
		},
		methods: {

			async info() {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/user/sore',
					data: {}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.body = result.data.data;
						that.name = result.data.data.is_sign
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},


			async toReceive() {		
				if (this.name == '今日已签') {
					this.msg('今日已签')
					return
				}

				this.receive = true

				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/gift/day_sign',
					data: {}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {				
						that.$store.commit('setsore', this.$store.state.my_score + result.data.data);
				
						this.body.tian++
						this.name = "今日已签"
						this.msg('签到成功，获得心动次数和'+this.configInfo.site_moneyname)
						uni.$emit('qiandaook',true)
						setTimeout(() => {
							this.receive = false
						}, 1800)

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	$W: 140rpx;
	$titleSize: 36rpx;
	$signH: 80rpx;

	.b-card {
		margin: 40rpx;
		padding: 20rpx;
		background-color: rgba(0, 0, 0, 0.302);
		border-radius: 20rpx;
	}

	.b-flex-space {
		display: flex;
		justify-content: space-between;
	}

	.b-fontw {
		font-weight: 600;
	}

	@keyframes middles {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(0);
		}
	}

	.addAnimation {
		animation: middles 0.5s linear;
	}

	.warp {
		background: linear-gradient(0deg, #39308D 0%, #342C67 100%);
		// padding: 0 20rpx;
		.exchange-box {
			color: #F1F1F1;
			height: 300rpx;

			.title {
				display: flex;
				height: 80rpx;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;

				.exchange-btn {
					margin-left: 20rpx;
					padding: 4rpx 20rpx;
					font-size: 14px;
					border-radius: 40rpx;
					color: #000000;
					opacity: 0.8;
				}
			}

			.content {
				height: 100rpx;
				margin-top: 10rpx;
				// background-color: rgba(0,0,0,0.6);
				position: relative;

				.sign-box {
					position: absolute;
					left: 20rpx;
					top: 30rpx;

					.sign-content {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;

						.sign-title {
							font-size: 28rpx;
						}

						.sign-garden {
							width: $W/2;
							height: $W/2;
							border-radius: 50%;
							color: #444a62;
							font-weight: 600;
							background-color: rgba(255, 255, 255, 0.9);
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.footer-box {
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -$W/2;

					.footer-outer {
						width: $W;
						height: $W;
						padding: 10rpx;
						box-sizing: border-box;
						background-color: rgba(255, 255, 255, 0.5);
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.footer-inside {
							width: 100%;
							height: 100%;
							background-color: rgba(255, 255, 255, 0.9);
							border-radius: 50%;
							display: flex;
							font-size: 28rpx;
							color: #444a62;
							justify-content: center;
							align-items: center;
							flex-direction: column;
						}
					}
				}

			}
		}

		.signIn-box {
			.signIn-heard {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					height: $signH;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title-today {
						font-size: $titleSize;
						color: #fff;
					}

					.title-tomorrow {
						font-size: 24rpx;
						color: #C0C0C0;
					}
				}
				.activeName{
					width:244rpx;
					height:80rpx ;
					color: #fff;
					border-radius: 40rpx;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					line-height: 80rpx;
					background: linear-gradient(180deg, rgba(65, 133, 255, 0.8) 0%, rgba(85, 223, 252, 0.8) 100%) !important;
				}
				.noActive{
					width:244rpx;
					height:80rpx ;
					color: #fff;
					border-radius: 40rpx;
					box-sizing: border-box;
					/* 暗色调渐变3 */
					border: 1px solid transparent;
					background-image: linear-gradient(#251f4c, #251f4c),// 跟背景色保持一致，根据实际情况修改
								linear-gradient(135deg, rgba(194, 54, 253, 1), rgba(97, 70, 255, 1), rgba(67, 169, 241, 1));
					background-origin: border-box;
					background-clip: content-box, border-box;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					line-height: 80rpx;
				}

				.total {
					height: $signH - 10;
					font-size: 30rpx;
					padding: 0 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;
					border: 2rpx solid #C0C0C0;

					.img {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}
				}
			}

			.signIn-content {
				.item {
					width: calc(50% - 10rpx);

					.img {
						height: 60rpx;
						width: 60rpx;
						margin: 6rpx 0;
					}
				}

				.item-flex {
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: center;

				}

				.card {
					height: 180rpx;
					padding: 15rpx 24rpx;
					box-sizing: border-box;
					background-color: #f5f6fa;
					border-radius: 10rpx;
					margin-top: 20rpx;

					.title {
						font-size: 28rpx;
					}

					.describe {
						font-size: 28rpx;
						color: #4d4d4d;
					}

					.item-check {}
				}

				.card-check {
					color: #FFFFFF;			

					.describe {
						color: #FFFFFF;
					}
				}

			}
		}

		.task-box {
			.title {
				font-size: $titleSize;
			}

			.task-item {
				margin: 60rpx 0;
				align-items: center;

				.task-item-left {
					align-items: center;

					.task-item-icon {
						width: 60rpx;
						height: 60rpx;
					}

					.task-item-describe {
						height: 80rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 30rpx;

						.title {
							font-size: 28rpx;
						}

						.text {
							font-size: 20rpx;
							color: #C0C0C0;
						}
					}
				}

				.task-item-btn {
					width: 180rpx;
					color: #FFFFFF;
					padding: 10rpx 20rpx;
					font-size: 28rpx;
					font-weight: 600;				
					box-shadow: 2rpx 2rpx 10rpx #f5f6fa;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>
